<template>
  <view>
  <uni-card v-for="(evaluate,index) in evaluates" :key="index" :title="evaluate.userName" sub-title="副标题" :extra="evaluate.createdDatetime" :thumbnail="avatar">
    <view slot="title">
      <view v-if="evaluate.userName || evaluate.evaluateGrade" class="uni-card__header">
        <!-- 卡片标题 -->
        <view class="uni-card__header-box">
          <view class="uni-card__header-avatar">
            <image class="uni-card__header-avatar-image" v-if="evaluate.userAvatar" :src="evaluate.userAvatar"
                   mode="aspectFit"/>
            <image class="uni-card__header-avatar-image" v-else src="/static/avatar/noAvatar.png" mode="aspectFit"/>
          </view>
          <view class="uni-card__header-content">
            <text class="uni-card__header-content-title uni-ellipsis">{{ evaluate.userName }}</text>
            <view v-if="evaluate.userName&&evaluate.evaluateGrade"
                  class="uni-card__header-content-subtitle uni-ellipsis">评分:
              <uni-rate style="display: inline-block" :max="5" :size="12" :value="evaluate.evaluateGrade"/>
            </view>
          </view>
        </view>
        <view class="uni-card__header-extra">
          <text class="uni-card__header-extra-text">{{ evaluate.createDatetime }}</text>
        </view>
      </view>
    </view>
    <view class="uni-body">
      <view>
        {{ evaluate.evaluateContent }}
      </view>
      <view class="repairOrderContent" @click="showRepairOrder(evaluate.repairOrderId)">
        报修单号:{{ evaluate.repairOrderCode }}
      </view>

    </view>
    <view slot="actions" class="card-actions" v-if="actionShow">
      <view class="card-actions-item" v-for="(action,key) in actions" :key="key"
            @click.stop="actionsClick(action.method,evaluate,index)">
        <uni-icons :type="action.icon" size="18" color="#999"></uni-icons>
        <text class="card-actions-item-text">{{ action.title }}</text>
      </view>
    </view>
  </uni-card>
    <o-empty v-if="evaluates.length==0"></o-empty>
  </view>
</template>

<script>
import {RepairEvaluateService} from "../normalUser/public/Evaluate/repairEvaluateService";
import OEmpty from "../../uni_modules/o-empty/components/o-empty/o-empty";

export default {
  name: "EvaluateShow",
  components: {OEmpty},
  props: {
    evaluates: {
      type: Array,
      default: [],
    },
    actionShow:{
      type:Boolean,
      default: true
    }
  },
  data() {
    return {
      actions: [
        {
          title: "修改",
          icon: "compose",
          method: "revise",
        },
        {
          title: "删除",
          icon: "trash",
          method: "delete",
        },
      ]
    }
  },
  methods:{
    showRepairOrder(eid){
      let url="/pages/normalUser/public/detailRepairOrder/index?id="+eid;
      uni.navigateTo({
        url: url
      })
    },
    actionsClick(method,evaluate,index){
      if(method=='revise'){
        this.revise(evaluate);
        return
      }
      if(method=='delete'){
        this.del(evaluate,index);
        return
      }
    },
    revise(evaluate){
      uni.navigateTo({
        //保留当前页面，跳转到应用内的某个页面
        url: '/pages/normalUser/public/Evaluate/index?eid='+evaluate.eid
      })
    },
    del(evaluate,index){
      RepairEvaluateService.deleteRepairEvaluate(evaluate.eid).then(res=>{
        uni.showToast({
          title:"删除成功",
          icon:"success"
        })
        this.$emit("del",index)
      }).catch(err=>{
        console.log(err)
        uni.showToast({
          title:"删除失败",
          icon:'error'
        })
      })
    }
  }
}
</script>

<style scoped>
.repairOrderContent {
  background-color: #f1f1f1;
}
.borderClass{
  width: 150upx;
  height: 50upx;
  background-color: #4CD964;
  padding: 10upx;
  /*margin: 20upx;*/
}
.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  border-top: 1px #eee solid;
}
.card-actions-item{
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
<style lang="scss">
$uni-border-3: #EBEEF5 !default;
$uni-shadow-base: 0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-main-color: #3a3a3a !default;
$uni-base-color: #6a6a6a !default;
$uni-secondary-color: #909399 !default;
$uni-spacing-sm: 8px !default;
$uni-border-color: $uni-border-3;
$uni-shadow: $uni-shadow-base;
$uni-card-title: 15px;
$uni-cart-title-color: $uni-main-color;
$uni-card-subtitle: 12px;
$uni-cart-subtitle-color: $uni-secondary-color;
$uni-card-spacing: 10px;
$uni-card-content-color: $uni-base-color;
.uni-card__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: $uni-card-spacing;
  overflow: hidden;

  .uni-card__header-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex: 1;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
  }

  .uni-card__header-avatar {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: $uni-card-spacing;

    .uni-card__header-avatar-image {
      flex: 1;
      width: 40px;
      height: 40px;
    }
  }

  .uni-card__header-content {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    flex: 1;
    // height: 40px;
    overflow: hidden;

    .uni-card__header-content-title {
      font-size: $uni-card-title;
      color: $uni-cart-title-color;
      // line-height: 22px;
    }

    .uni-card__header-content-subtitle {
      font-size: $uni-card-subtitle;
      margin-top: 5px;
      color: $uni-cart-subtitle-color;
    }
  }

  .uni-card__header-extra {
    line-height: 12px;

    .uni-card__header-extra-text {
      font-size: 12px;
      color: $uni-cart-subtitle-color;
    }
  }
}
</style>